<template>


    <div>
        <el-row>
            <el-col :span="12">
                <el-button @click="toAdd(0)">添加一级菜单 </el-button>
            </el-col>
        </el-row>



        <el-table :data="tableData" row-key="menuId" lazy :load="load"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border style="width: 100%"
            v-loading="loading">
            <!-- <el-table-column prop="menuId" label="menuId" width="180" /> -->
            <el-table-column prop="menuName" label="菜单名称" width="180" />
            <el-table-column prop="url" label="菜单路径" width="180" />
            <el-table-column prop="path" label="组件路径" width="180" />
            <el-table-column prop="level" label="菜单级别" width="180" />
            <!-- <el-table-column prop="parentId" label="上级菜单" width="180" /> -->


            <el-table-column prop="createtime" label="createtime" />
            <el-table-column prop="menuId" label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="deleteById(scope.row.menuId)">删除</el-button>
                    <el-button link type="primary" @click="toEdit(scope.row.menuId)">修改</el-button>
                    <el-button link type="primary" @click="toAdd(scope.row.menuId)">添加子菜单</el-button>
                </template>
            </el-table-column>

        </el-table>
        <!-- <el-pagination v-model:current-page="queryParam.current" :page-sizes="[3, 5, 10, 15, 20, 30, 40]"
            v-model:page-size="queryParam.size" size="default" layout="sizes, prev, pager, next" :total="total"
            @size-change="loadDataList" @current-change="loadDataList" /> -->



        <el-dialog title="菜单管理" width="600px" v-model="showEdit">

            <el-form :model="form" label-width="auto">
                <el-form-item label="菜单名称">
                    <el-input v-model="form.menuName" />
                </el-form-item>
                <el-form-item label="菜单路径">
                    <el-input v-model="form.url" />
                </el-form-item>
                <el-form-item label="组件路径">
                    <el-input v-model="form.path" />
                </el-form-item>
                <el-form-item label="菜单级别">
                    <el-input v-model="form.level" />
                </el-form-item>


                <el-form-item label="是否显示">
                    <el-input v-model="form.show" />
                </el-form-item>
                <!-- <el-form-item label="上级菜单">
                    <el-input v-model="form.parentId" />
                </el-form-item> -->

                <el-form-item>
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button @click="closeDialog()">Cancel</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


    </div>




</template>


<script lang="ts" setup name="User">

import { ref, onMounted, reactive } from 'vue'
// import { service } from "@/utils/request";
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

import { page, list, deleteById as del, queryById, saveOrUpdate, type PageInfo } from '@/utils/crud'

interface Menu {
    menuId?: string;
    menuName: string;
    url: string;
    path: string;
    level: number | undefined;
    parentId: number | undefined;
    createtime?: string;
    hasChildren?: boolean;
    show: number
}


//数据

const tableData = ref<Menu[]>()
const queryParam = reactive({
    // current: 1,
    // size: 10,
    parentId: 0
});
const total = ref(0);
const loading = ref(false);

const form = reactive<Menu>({

    menuName: '',
    url: '',
    path: '',
    level: undefined,
    parentId: undefined,
    show: 0
})
const showEdit = ref(false);

// 懒加载
function load(row: any, treeNode: any, resolve: Function) {


    console.log("row", row);



    queryParam.parentId = row.menuId
    list<Menu>('/menu/listByParentId', queryParam).then(function (data) {

        data.forEach((menu) => {
            menu.hasChildren = true
        })


        console.log("data", data);


        //追加到子元素
        resolve(data)

        loading.value = false;
    })
}



function loadDataList() {
    loading.value = true;
    // 为给定 ID 的 user 创建请求
    //data  真实的数据
    list<Menu>('/menu/listByParentId', queryParam).then(function (data) {

        data.forEach((menu) => {
            menu.hasChildren = true
        })

        tableData.value = data;

        loading.value = false;
    })

}

function deleteById(id: string) {
    ElMessageBox.confirm(
        '是否删除数据?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            del('/menu/delete', id).then(function (success) {
                if (success) {
                    ElMessage({
                        message: '删除成功',
                        type: 'success'
                    })

                    loadDataList();
                } else {
                    ElMessage({
                        message: '删除失败',
                        type: 'error'
                    })

                }
            })
        })

}

function save() {

    saveOrUpdate('/menu/saveOrUpdate', form).then(function (success) {
        if (success) {
            ElMessage({
                message: '保存成功',
                type: 'success'
            })
            closeDialog();
            // location.href = location.href
            loadDataList();
        } else {
            ElMessage({
                message: '保存失败',
                type: 'error'
            })
        }

    })
}

function toAdd(parentId: number) {
    showEdit.value = true
    delete form.menuId;
    form.menuName = '';
    form.url = '';
    form.path = '';
    form.level = undefined;
    form.parentId = parentId;
    form.createtime = undefined;

}

function toEdit(id: string) {


    //根据主键查询 数据 放到  form 表单
    queryById<Menu>('/menu/getById', id).then((vo) => {

        showEdit.value = true;
        form.menuId = vo.menuId;
        form.menuName = vo.menuName;
        form.url = vo.url;
        form.path = vo.path;
        form.level = vo.level;
        form.parentId = vo.parentId;;
    })

}
function closeDialog() {
    showEdit.value = false
}

onMounted(() => {
    // 获取数据
    loadDataList();
})


</script>